<template>
  <view class="shopPage">
    <view class="topBox con">
      <view class="navbarBox">
        <u-icon name="arrow-left" @click="goBack" color="#000" size="24" style="margin-right: 20rpx"></u-icon>
        <u-input placeholder="搜索内容" prefix-icon="search" prefix-icon-style="color:#8dd9d4;font-size:24px"> </u-input>
      </view>
      <u-swiper :list="list2" height="160"></u-swiper>
    </view>
    <!-- <up-tabs
      :list="list1"
      lineColor="#81D8D0"
      :activeStyle="{
        color: '#333',
        fontWeight: 'bold',
        transform: 'scale(1.05)',
      }"
    ></up-tabs> -->
    <view class="listBox">
      <view style="width: 49%" v-for="(item, index) in goodsList">
        <GoodsItem :info="item" />
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { goBack } from "@/utils/commonFn";
import GoodsItem from "./components/GoodsItem.vue";
import { onMounted, reactive, ref } from "vue";
import { clubGetPointGoodList } from "@/api/order";
//@ts-ignore
import { onReachBottom } from "@dcloudio/uni-app";
const list2 = ["https://cdn.uviewui.com/uview/swiper/swiper1.png", "https://cdn.uviewui.com/uview/swiper/swiper2.png", "https://cdn.uviewui.com/uview/swiper/swiper3.png"];
const goodsList = ref([]);
const goodsStatus = ref("loadmore");
const goodsPage = ref(1);
onMounted(() => {
  getList();
});
const getList = async () => {
  if (goodsStatus.value == "nomore") {
    return;
  }
  goodsStatus.value = "loadmore";
  const res = await clubGetPointGoodList({ pageNo: goodsPage.value });
  goodsList.value = goodsList.value.concat(res.goodList);
  if (!res.next) {
    goodsStatus.value = "nomore";
  } else {
    goodsStatus.value = "loadmore";
  }
};
const goodsRest = () => {
  goodsPage.value = 1;
  goodsStatus.value = "loadmore";
  goodsList.value = [];
  getList();
};
onReachBottom(() => {
  goodsPage.value++;
  getList();
});
// 创建响应式数据
// const list1 = reactive([{ name: "推荐" }, { name: "品牌好物" }, { name: "休闲食品" }, { name: "服饰鞋包" }, { name: "日用百货" }]);
</script>
<style lang="less" scoped>
.shopPage {
  width: 100%;
  .topBox {
    padding-left: 32rpx;
    padding-right: 32rpx;
    background: linear-gradient(180deg, rgba(92, 203, 193, 0.24) 0%, rgba(92, 203, 193, 0.04) 66%, rgba(92, 203, 193, 0) 100%);
    margin-bottom: 20rpx;
    .priceBox {
      height: 300rpx;
      background: #ffffff;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      padding: 16rpx;
      .priceBoxTitle {
        height: 44rpx;
        font-family: DingTalk JinBuTi, DingTalk JinBuTi;
        font-weight: 400;
        font-size: 36rpx;
        color: #333333;
        line-height: 44rpx;
        margin-bottom: 22rpx;
        position: relative;
        .line {
          position: absolute;
          bottom: 1rpx;
          width: 135rpx;
          height: 14rpx;
          background: #81d8d0;
          border-radius: 0rpx 0rpx 0rpx 0rpx;
          opacity: 0.3;
        }
      }
      .priceBoxGoods {
        display: flex;
        flex-wrap: nowrap;
        gap: 4rpx;
        justify-content: space-between;
        flex: 1;
        .box {
          width: 24%;
          .imgBox {
            width: 100%;
            height: 152rpx;
            border-radius: 16rpx 16rpx 16rpx 16rpx;
            border: 2rpx solid #f3f4f6;
          }
          .priceText {
            display: flex;
            align-items: center;
            font-size: 32rpx;
            color: #ea3b3b;
            margin-top: 10rpx;
            .deleteLine {
              font-size: 24rpx;
              color: #8a8a8d;
              line-height: 34rpx;
              text-decoration-line: line-through;
              text-transform: none;
            }
          }
        }
      }
    }
  }
}
.listBox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: #f3f4f6;
  margin-top: 20rpx;
}
</style>
